<template>
 <div style="padding: 7px 13px;border: 1px solid var(--color-neutral-5);display: inline-block;border-radius: 4px;color: var(--color-neutral-10);">
  <span>{{ data[index] }}</span>
  <span style="margin-left: 10px;position: relative;top: 2px;color: var(--color-neutral-6);"><svg width="15" height="15" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 31.728l16.264-16.264a1 1 0 011.414 0l1.414 1.415a1 1 0 010 1.414L25.414 35.97a2 2 0 01-2.828 0L4.908 18.293a1 1 0 010-1.414l1.414-1.415a1 1 0 011.415 0L24 31.728z" fill="currentColor"/></svg></span>
 </div>
</template>

<script>

export default{
  data(){
    return{
      data:[],
      index:0,
    }
  },
  mounted(){
    this.data = this.items
    this.$emit('changed',this.data)
  },
  methods:{

  },
  props:{
    items:undefined,
  },
}
</script>

<style scoped>

</style>